<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Google Contacts Diff Tool</title>
		<meta charset="UTF-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<!--<script type="text/javascript" src="http://www.google.com/jsapi"></script>-->
		<script type="text/javascript" src="tgd/Tools/ContactDiff/Model.js"></script>
		<script type="text/javascript" src="tgd/Tools/ContactDiff/User.js"></script>
        <script type="text/javascript" src="tgd/Tools/ContactDiff/Contact.js"></script>
        <script type="text/javascript" src="tgd/Tools/ContactDiff/ContactView.js"></script>
        <script type="text/javascript" src="tgd/Tools/ContactDiff/GUI.js"></script>
		<script type="text/javascript" src="tgd/Tools/ContactDiff/Property.js"></script>
		<!--<script type="text/javascript" src="tgd/Tools/ContactDiff/Google.js"></script>-->
		<script type="text/javascript">
			//<![CDATA[

var mod;
var gui;

HTMLElement.prototype.hide = function() {
    if (this.className.search("hidden") < 0) {
	    this.className = this.className.concat(" hidden");
	}
}

HTMLElement.prototype.show = function() {
	if (this.className.search("hidden") >= 0) {
	    this.className = this.className.replace("hidden", "");
	}
}

HTMLElement.prototype.pressed = function() {
    if (this.className.search("current") < 0) {
	    this.className = this.className.concat(" current");
	}
}

HTMLElement.prototype.unpressed = function() {
	if (this.className.search("current") >= 0) {
	    this.className = this.className.replace("current", "");
	}
}

function init() {
	localStorage.clear();
	localStorage.setItem("a@gmail.com", '[{"title":{"$t":"Mr Unique"}},{"title":{"$t":"Mr Identical"}, "gContact$event":[{"rel":"favorite day","gd$when":{"startTime":"-03-14"}}]},{"title":{"$t":"Vic Hanna"}},{"title":{"$t":"Ralph Kelsey"},"gd$name":{"gd$fullName":{"$t":"Ralph Kelsey"},"gd$givenName":{"$t":"Ralph"},"gd$familyName":{"$t":"Kelsey"}},"gContact$birthday":{"when":"2010-10-10"},"gd$email":[{"rel":"home","address":"rk@gmail.com","primary":"true"},{"rel":"work","address":"rk@ohio.edu"}],"gContact$event":[{"rel":"favorite day","gd$when":{"startTime":"-03-14"}}],"gd$phoneNumber":[{"rel":"mobile","$t":"555-867-5309"}]}]');
	localStorage.setItem("b@gmail.com", '[{"title":{"$t":"Mr Identical"}, "gContact$event":[{"rel":"favorite day","gd$when":{"startTime":"-03-14"}}]},{"title":{"$t":"Vic Hanna"}, "gContact$birthday":{"when":"2010-10-10"}},{"title":{"$t":"Ralph Kelsey"},"gd$name":{"gd$fullName":{"$t":"Ralph Kelsey"},"gd$givenName":{"$t":"Ralph"},"gd$familyName":{"$t":"Kelsey"}},"gContact$birthday":{"when":"2010-10-09"},"gd$email":[{"rel":"home","address":"rk@gmail.com","primary":"true"},{"rel":"other","address":"rk@yahoo.edu"}],"gContact$event":[{"rel":"favorite day","gd$when":{"startTime":"1999-12-31"}}],"gd$phoneNumber":[{"rel":"mobile","$t":"555-867-5309"}]}]');

    mod = new tgd.Tools.ContactDiff.Model();

    gui = new tgd.Tools.ContactDiff.GUI(mod);

	gui.loadUserList();
    gui.setPanel(gui.Panels.Main);

/*
	gui.G = new tgd.Tools.ContactDiff.Google();
	if (gui.G.isAuthenticated) {
        setLoading(true);
	    gui.G.getContacts(
	        function(data) {
    	        //TODO: update display
    	        mod.add(data);
    	        if (mod.Finished) {
    	            gui.G.logout();
                    setLoading(false);
	            }
	        }, 
	        function(error) {
	            console.dir(error);
	            alert("TODO: error");
            }
        );
        
        gui.G.getGroups(
	        function(data) {
    	        //TODO: update display
    	        mod.add(data);
    	        if (mod.Finished) {
    	            gui.G.logout();
                    setLoading(false);
	            }
	        }, 
	        function(error) {
	            console.dir(error);
	            alert("TODO: error");
            }
        );
	}
*/

}

function bobby() {
    if (!gui.isLoaded) {
        gui.loadContacts();
        document.getElementById("lblNumIdenticals").textContent = gui.NumIdenticals;
        document.getElementById("lblNumUniques").textContent = gui.NumUniques;
        document.getElementById("lblNumCommons").textContent = gui.NumCommons;
    }

    gui.setPanel(gui.Panels.Contacts);
}

function setLoading(show) {
	if (show) {
	    gui.Panels.Loading.show();
	} else {
	    gui.Panels.Loading.hide()
	}
}

		//]]>
		</script>
		<style type="text/css">
            body,html{margin:0;height:100%;width:100%;background:#fff;font-family:sans-serif;}

            h1{background:#D9E2FA;color:#249;padding:7px 0;margin:0;text-align:center;position:relative;font-size:1em;border-bottom:1px solid #93aded;}
            h1 a{text-decoration:none;color:#249;padding:5px 15px;border:solid 1px #9EADD2;background:#EBEFF9;}
            h1 a.right,h1 a.left{position:absolute;top:1px;}
            h1 a.right{right:5px;}
            h1 a.left{left:5px;}

            h2{background:#EBEFF9;color:#249;border-top:solid 1px #ccc;border-bottom:solid 1px #a9b7d7;padding:7px 0;margin:0;font-size:1em;font-weight:normal;}
            h3{background:#FFF5C2;border-bottom:1px solid #ccc;border-top:1px solid #ccc;color:#333;font-size:0.9em;font-weight:normal;margin:0;padding:0;}

            .listRow{position:relative;color:#333;border-bottom:solid 1px #eee;border-top:solid 1px #ccc;overflow:hidden;padding: 7px 5px;}
            .listRow div{}
            .listRow input,
            .listRow .button{margin:0;padding:0 5px;color:#249;font-weight:bold;font-family:monospace;font-size:1em;text-decoration:none;border:solid 1px #93aded;background:#fff;}
            .listRow .button{padding:5px 15px;}
            .listRow span.button{border:none;}
            .listRow .right,.listRow .left{position:absolute;top:1px;}
            .listRow .right{right:5px;}
            .listRow .left{left:5px;}

            .hidden{display:none;}

            #templates{display:none;}

            

            .menu{background:#FFF;padding:5px;position:absolute;right:5px;left:5px;text-align:left;top:5px;border:solid 1px #249;}
            .menu div{padding:.5em;border-bottom:solid 1px #249;}
            .menu :last-child{border-bottom:none;}
            .menu div:hover{background:#D9E2FA;}

            .match{color:green;}
            .diff{color:#f00;}

            .contact .button{margin:0;padding:1px 5px;color:#249;font-weight:bold;font-family:monospace;font-size:1em;text-decoration:none;border:solid 1px #93aded;background:#EBEFF9;}
            .contact .btnToggle{margin-left:5px;}
            .contact .lblDiffs{color:red;}
            .contact .lblMatches{color:green;}
            .contact .repDiffs tr:first-child{color:#249;font-size:1.1em;font-weight:bold;}
            .contact table{color:#666;font-size:.8em;border-collapse:collapse;width:100%;}
            .contact td{padding:5px;}
            .contact tr{border-bottom:solid 1px #D9E2FA;}
            .contact tr td div > div > div{padding-left:1em;}  /* TODO use a class instead of this crazy style */
            .contact table :last-child{border-bottom:none;}

            .contact .panSwitches{float:right;margin-right:5px;border-bottom:solid 1px #ccc;border-right:solid 1px #ccc;}
            .contact .panSwitches div{float:right;border-left-color:#ccc;}
            .contact .panSwitches .current,.contact .btnToggle.current{background:#D9E2FA;border:solid 1px #9eadd2}
            .contact .panSwitches :last-child{border-left-color:#9eadd2;}
        </style>
	</head>
	<body onload="init();">
		<div id="menu"><img src="cleardot.gif" class="hidden" /></div>
		<div id="pages">
			<div id="panMain" class="hidden">
				<h1>
					Google Contact Diff Tool
					<a href="javascript:(function() { gui.G.login(); } )()" type="button" class="button right">+</a>
				</h1>
				<div class="listRow">
					<div>All Contacts</div>
					<span class="button right" onclick="bobby();">&raquo;</span>
				</div>
				<div id="panUserList"></div>
			</div>
			<div id="panUser" class="hidden">
				<h1>
					<a class="left" href="javascript:(function() { gui.setPanel(gui.Panels.Main); } )()">&laquo;</a>
					<span id="lblUser"></span>
					<a href="javascript:(function() { gui.Panels.UserContactsMenu.show(); } )()" type="button" class="button right">&hellip;</a>
                    <div id="panUserContactsMenu" class="hidden menu">
                        <div onclick="gui.expandUserContacts();">Expand All</div>
                        <div onclick="gui.collapseUserContacts();">Collapse All</div>
                        <div onclick="gui.Panels.UserContactsMenu.hide();">Close</div>
                    </div>
				</h1>
				<div id="repUserContacts"></div>
			</div>
			<div id="panContacts" class="hidden">
				<h1>
					<a class="left" href="javascript:(function() { gui.setPanel(gui.Panels.Main); } )()">&laquo;</a>
					All Contacts
					<a href="javascript:(function() { gui.Panels.ContactsMenu.show(); } )()" type="button" class="button right">&hellip;</a>
					<div id="panContactMenu" class="hidden menu">
                        <div onclick="gui.expandContacts();">Expand All</div>
                        <div onclick="gui.collapseContacts();">Collapse All</div>
						<div onclick="gui.showAll();">All</div>
						<div onclick="gui.showMatches();;">Matches</div>
                        <div onclick="gui.showDifferences();">Diffs</div>
                        <div onclick="document.getElementById('lblShowHideIdenticals').textContent = (document.getElementById('lblShowHideIdenticals').textContent === 'Show' ? 'Hide' : 'Show');gui.toggleIdenticals();">
                            <span id="lblShowHideIdenticals">Show</span>
                            identicals
                            &nbsp;(
                            <span id="lblNumIdenticals"></span>
                            )
                        </div>
                        <div onclick="document.getElementById('lblShowHideUniques').textContent = (document.getElementById('lblShowHideUniques').textContent === 'Show' ? 'Hide' : 'Show');gui.toggleUniques();">
                            <span id="lblShowHideUniques">Show</span> uniques
                            &nbsp;(
                            <span id="lblNumUniques"></span>
                            )
                        </div>
                        <div onclick="document.getElementById('lblShowHideCommons').textContent = (document.getElementById('lblShowHideCommons').textContent === 'Show' ? 'Hide' : 'Show');gui.toggleCommons();">
                            <span id="lblShowHideCommons">Hide</span> commons
                            &nbsp;(
                            <span id="lblNumCommons"></span>
                            )
                        </div>
						<div onclick="gui.Panels.ContactsMenu.hide();">Close</div>
					</div>
				</h1>
				<div id="repContacts"></div>
			</div>
		</div>

		<div id="templates">
			<div class="listRow">
				<div class="rowText"></div>
				<span class="rowButton button right" >&raquo;</span>
			</div>
            <div class="contact">
                <h2>
                    <span class="btnToggle button">&mdash;</span>
                    <span class="lblName"></span>
                    <span class="panAmounts">
                        (<span class="lblDiffs"></span>,<span class="lblMatches"></span>)
                    </span>
                    <div class="panSwitches">
                        <div class="btnUnequal button">!=</div>
                        <div class="btnEqual button">==</div>
                        <div class="btnAll button">*</div>
                    </div>
                </h2>
                <div class="panProperties">
                    <div class="panMatching">
                        <h3>Matching</h3>
                        <table class="repMatching"></table>
                    </div>
                    <div class="panDiffs">
                        <h3>Diffs</h3>
                        <table class="repDiffs"></table>
                    </div>
                    <div class="panUserContacts">
                        <table class="repUserContacts"></table>
                    </div>
                </div>
            </div>
		</div>

		<div id="panLoading" class="hidden" style="position: fixed; top: 0pt; bottom: 0pt; right: 0pt; left: 0pt;">
			<div style="position: fixed; top: 0pt; bottom: 0pt; left: 0pt; right: 0pt; background: none repeat scroll 0% 0% rgb(0, 0, 0); opacity: 0.8;"></div>
			<div style="position: fixed; top: 0pt; right: 0pt; left: 0pt; bottom: 0pt; text-align: center; padding-top: 5em;">
				<span onclick="setLoading(false);" style="border:1px solid #9eadd2;padding: 5px 15px; color:#249; background: #ebeff9; font-size: 2em;">loading ...</span>
			</div>
		</div>
	</body>
</html>
